<template>
	<view class="container">

		<view class="submit-form">
			<view class="form-item">
				<textarea class="form-item--input" v-model="content" placeholder="请输入你想知道的问题"></textarea>
			</view>
			<view v-if="result" class="form-item result">
				<textarea class="form-item--input" v-model="result" placeholder="这里是答案内容"></textarea>
			</view>

			<view class="submit-button" @click="handleSubmit()">
				<text>提交</text>
			</view>
		</view>

	</view>
</template>

<script>
	import store from '@/store'
	import * as OpenaiApi from '@/api/openai'
	import * as Verify from '@/utils/verify'

	export default {

		data() {
			return {
				// 正在加载
				isLoading: false,
				content: '',
				result: ''
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		created() {},

		methods: {


			// 表单验证
			formValidation() {
				const app = this
				// 验证表单提交
				if (!app.validtecontent(app.content)) {
					return false
				}
				return true
			},

			// 验证
			validtecontent(str) {
				if (Verify.isEmpty(str)) {
					this.$toast('请输入你想知道的问题')
					return false
				}

				return true
			},




			// 点击提交
			handleSubmit() {
				const app = this
				if (!app.isLoading && app.formValidation()) {
					app.onSubmitEvent()
				}
			},

			// 确认提交事件
			onSubmitEvent() {
				const app = this
				app.isLoading = true
				OpenaiApi.chatGpt({
						form: {
							msg: app.content
						}
					})
					.then(result => {
						// 显示操作成功
						app.$toast(result.message)

						// 填充结果
						this.result = result.data.content;
					})
					.finally(() => app.isLoading = false)
			},

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 40rpx 30rpx;
		min-height: 100vh;
		background-color: #fff;
	}

	// 页面头部
	.header {
		margin-bottom: 50rpx;

		.title {
			color: #191919;
			font-size: 50rpx;
		}

		.sub-title {
			margin-top: 20rpx;
			color: #b3b3b3;
			font-size: 25rpx;
		}
	}

	// 输入框元素
	.form-item {
		display: flex;
		padding: 18rpx;
		border-bottom: 1rpx solid #f3f1f2;
		margin-bottom: 25rpx;
		// min-height: 96rpx;
		background: aliceblue;

		&--input {
			font-size: 26rpx;
			letter-spacing: 1rpx;
			flex: 1;
			height: 96rpx;
		}

		&--parts {
			min-width: 100rpx;
			height: 100%;
		}

		.result {
			background-color: #eee;
		}

	}


	// 提交按钮
	.submit-button {
		width: 100%;
		height: 86rpx;
		// margin-top: 70rpx;
		// background: #cea26a;
		background: linear-gradient(to right, #ecb53c, #ff9211);
		text-align: center;
		line-height: 86rpx;
		color: #fff;
		border-radius: 80rpx;
		box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
		letter-spacing: 5rpx;
	}
</style>
